<template>
	<view class="pricing">
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				定价策略
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<view class="headtop" :style="{marginTop: pHeight + tHeight + 'px'}">
			<view class="top clearfix">
				<view class="left fl clearfix">
					<view class="mess fl">
						<view :class="[attrIndex==1?'active':'']" @click="attrIndex = 1">普充宝</view>
						<text class="dian" v-if="attrIndex == 1"></text>
					</view>
					<view class="mess mess1 fl" @click="attrIndex = 2">
						<view :class="[attrIndex==2?'active':'']">快充宝</view>
						<text class="dian" v-if="attrIndex == 2"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="nr">
			<view class="headtitle">当前门店策略</view>
			<view class="list">
				<view class="liebiao clearfix">
					<view class="left fl">单价：</view>
					<view class="right fl">
						
						<view v-if="attrIndex==1" class="title">每{{billing.minute}}{{billing.attr==1?'分钟':'小时'}}：{{billing.danjia}}元</view>
						
						<view v-else class="title">每{{kbilling.minute}}{{kbilling.attr==1?'分钟':'小时'}}：{{kbilling.danjia}}元</view>
					</view>
				</view>
				<view class="liebiao clearfix">
					<view class="left fl">每日封顶金额：</view>
					<view class="right fl">
						<view class="title" v-if="attrIndex==1">{{billing.dayconsume}}元</view>
						<view class="title" v-else>{{kbilling.dayconsume}}元</view>
					</view>
				</view>
				<view class="liebiao clearfix">
					<view class="left fl">总封顶金额：</view>
					<view class="right fl">
						<view class="title" v-if="attrIndex==1">{{billing.maxmoney}}元</view>
						<view class="title" v-else>{{kbilling.maxmoney}}元</view>
					</view>
				</view>
				<view class="liebiao clearfix">
					<view class="left fl">免费策略：</view>
					<view class="right fl">
						<view class="title" v-if="attrIndex==1">{{billing.mianfei}}分钟（超出按单价计算）</view>
						<view class="title" v-else>{{kbilling.mianfei}}分钟（超出按单价计算）</view>
					</view>
				</view>
			</view>
		</view>
		<view class="headtitles">修改门店策略</view>
		<view class="form" v-if="attrIndex==1">
			<view class="content clearfix">
				<view class="name fl">时间单位</view>
				<view class="xuanze fr" @click="timestatus = true">
					{{timemethod}}
				</view>
				<u-select v-model="timestatus" :list="timelist" @confirm="confirmtime"></u-select>
			</view>
			<view class="content clearfix">
				<view class="name fl">单价</view>
				<!-- <view class="xuanze fr" @click="fzstatus = true">
					每{{killingform.minute}}{{timemethod}}
				</view>
				<u-select v-model="fzstatus" :list="fzlist" @confirm="confirmfz"></u-select> -->
				<view class="inp fr">
					<input type="text" placeholder="单价" v-model="killingform.minute"/>
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">收费(元)</view>
				<!-- <view class="xuanze fr" @click="djstatus = true">
					{{killingform.danjia}}元
				</view>
				<u-select v-model="djstatus" :list="djlist" @confirm="confirmdj"></u-select> -->
				<view class="inp fr">
					<input type="text" placeholder="收费" v-model="killingform.danjia"/>
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">24小时封顶金额(元)</view>
				<!-- <view class="xuanze fr" @click="fdstatus = true">
					￥{{killingform.dayconsume}}
				</view> -->
				<!-- <u-select v-model="fdstatus" :list="fdlist" @confirm="confirmfd"></u-select> -->
				<view class="inp fr">
					<input type="text" placeholder="请输入每日封顶金额" v-model="killingform.dayconsume"/>
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">免费策略</view>
				<!-- <view class="xuanze fr" @click="mfstatus = true">
					{{killingform.mianfei}}分钟
				</view>
				<u-select v-model="mfstatus" :list="mflist" @confirm="confirmmf"></u-select> -->
				<view class="inp fr">
					<input type="text" placeholder="请输入免费分钟" v-model="killingform.mianfei"/>
				</view>
			</view>
			<view class="content contentlast clearfix">
				<view class="name fl">封顶金额</view>
				<view class="inp fr">
					<input type="text" placeholder="99.00元" disabled />
				</view>
			</view>
		</view>
		
		<view class="form" v-else>
			<view class="content clearfix">
				<view class="name fl">时间单位</view>
				<view class="xuanze fr" @click="timestatus = true">
					{{timemethod1}}
				</view>
				<u-select v-model="timestatus" :list="timelist" @confirm="confirmtime"></u-select>
			</view>
			<view class="content clearfix">
				<view class="name fl">单价</view>
				<!-- <view class="xuanze fr" @click="fzstatus = true">
					每{{kkillingform.minute}}{{timemethod1}}
				</view>
				<u-select v-model="fzstatus" :list="fzlist" @confirm="confirmfz"></u-select> -->
				<view class="inp fr">
					<input type="text" placeholder="单价" v-model="kkillingform.minute"/>
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">收费(元)</view>
				<!-- <view class="xuanze fr" @click="djstatus = true">
					{{kkillingform.danjia}}元
				</view>
				<u-select v-model="djstatus" :list="djlist" @confirm="confirmdj"></u-select> -->
				<view class="inp fr">
					<input type="text" placeholder="收费" v-model="kkillingform.danjia"/>
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">24小时封顶金额(元)</view>
				<!-- <view class="xuanze fr" @click="fdstatus = true">
					￥{{kkillingform.dayconsume}}
				</view> -->
				<!-- <input style="padding-top: 20rpx;text-align:right;" v-model="kkillingform.dayconsume" placeholder="请输入每日封顶金额"></input> -->
				<view class="inp fr">
					<input type="text" placeholder="请输入每日封顶金额" v-model="kkillingform.dayconsume"/>
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">免费策略</view>
				<!-- <view class="xuanze fr" @click="mfstatus = true">
					{{kkillingform.mianfei}}分钟
				</view>
				<u-select v-model="mfstatus" :list="mflist" @confirm="confirmmf"></u-select> -->
				<view class="inp fr">
					<input type="text" placeholder="请输入免费分钟" v-model="kkillingform.mianfei"/>
				</view>
			</view>
			<view class="content contentlast clearfix">
				<view class="name fl">封顶金额</view>
				<view class="inp fr">
					<input type="text" placeholder="149.00元" disabled />
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="submit" @click="submit1">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				attrIndex: 1,
				billing: {
					mianfei: "",//免费时长
					minute: '',//时间
					danjia: '',//价格
					dayconsume: '',//每日封顶
					maxmoney: '',//封顶金额
					attr: 1//1分钟 2小时
				},
				kbilling: {
					mianfei: "",//免费时长
					minute: '',//时间
					danjia: '',//价格
					dayconsume: '',//每日封顶
					maxmoney: '',//封顶金额
					attr: 1//1分钟 2小时
				},
				timestatus:false,
				fzstatus:false,
				djstatus:false,
				fdstatus:false,
				mfstatus:false,
				timelist:[
					{
						label: '分钟',
						value: '1',
					},
					{
						label: '小时',
						value: '2',
					}
				],
				djlist:[
					{
						label:'0.1',
						value:'0.1',
					},
					{
						label:'0.5',
						value:'0.5',
					},
					{
						label:'1',
						value:'1',
					},
					{
						label:'1.5',
						value:'1.5',
					},
					{
						label:'2',
						value:'2',
					},
					{
						label:'2.5',
						value:'2.5',
					},
					{
						label:'3',
						value:'3',
					},
					{
						label:'3.5',
						value:'3.5',
					},
					{
						label:'4',
						value:'4',
					},
					{
						label:'4.5',
						value:'4.5',
					},
					{
						label:'5',
						value:'5',
					},
					{
						label:'6',
						value:'6',
					},
					{
						label:'7',
						value:'7',
					},
					{
						label:'8',
						value:'8',
					},
					{
						label:'9',
						value:'9',
					},
					{
						label:'10',
						value:'10',
					}
				],
				fzlist:[
					{
						label:'1',
						value:'1',
					},
					{
						label:'3',
						value:'3',
					},
					{
						label:'10',
						value:'10',
					},
					{
						label:'60',
						value:'60',
					},
				],
				fdlist:[
					{
						label:'1',
						value:'1',
					},
					{
						label:'2',
						value:'2',
					},
					{
						label:'3',
						value:'3',
					},
					{
						label:'4',
						value:'4',
					},
					{
						label:'5',
						value:'5',
					},
					{
						label:'6',
						value:'6',
					},
					{
						label:'7',
						value:'7',
					},
					{
						label:'8',
						value:'8',
					},
					{
						label:'9',
						value:'9',
					},
					{
						label:'10',
						value:'10',
					},
					{
						label:'11',
						value:'11',
					},
					{
						label:'12',
						value:'12',
					},
					{
						label:'13',
						value:'13',
					},
					{
						label:'14',
						value:'14',
					},
					{
						label:'15',
						value:'15',
					},
					{
						label:'16',
						value:'16',
					},
					{
						label:'17',
						value:'17',
					},
					{
						label:'18',
						value:'18',
					},
					{
						label:'19',
						value:'19',
					},
					{
						label:'20',
						value:'20',
					},
					{
						label:'21',
						value:'21',
					},
					{
						label:'22',
						value:'22',
					},
					{
						label:'23',
						value:'23',
					},
					{
						label:'24',
						value:'24',
					},
				],
				mflist:[
					{
						label:'5',
						value:'5'
					},
					{
						label:'10',
						value:'10'
					},
					{
						label:'15',
						value:'15'
					},
					{
						label:'20',
						value:'20'
					},
					{
						label:'30',
						value:'30'
					}
				],
				killingform:{
					mianfei: "",//免费时长
					minute: '',//时间
					danjia: '',//价格
					dayconsume: 0.00,//每日封顶
					maxmoney: '99',//封顶金额
					attr: 1,//1分钟 2小时
					type: 1,
					agent_id: uni.getStorageSync('agent_id')
				},
				kkillingform:{
					mianfei: "",//免费时长
					minute: '',//时间
					danjia: '',//价格
					dayconsume: 0.00,//每日封顶
					maxmoney: '149',//封顶金额
					attr: 1,//1分钟 2小时
					type: 2,
					agent_id: uni.getStorageSync('agent_id')
				},
				timemethod:'分钟',
				timemethod1:'分钟',
				formData:{}
			}
		},
		onLoad(option) {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}
			// this.configBilling();
			
			//
			this.idm = option.idm;
			this.idk = option.idk;
			
			//判断一下
			if(this.idm==null||this.idm==''||this.idm==undefined){
				this.configBilling1();
			}else{
				this.billingInfo(this.idm,1);
			}
			
			if(this.idk==null||this.idk==''||this.idk==undefined){
				this.configBilling2();
			}else{
				this.billingInfo(this.idk,2);
			}
			
			
			// this.configBilling1();
			// this.configBilling2();
		},
		methods: {
			submit1(){
				//创建计费规则
				//判断一下是提交的哪个
				var formData = {};
				
				if(this.attrIndex==1){//普通宝
					formData = this.killingform;
				}else{//快充宝
					formData = this.kkillingform;
				}
				
				this.request({
					url: '/xcxlogin/addbilling',
					data: formData,
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						if(formData.type==1){//普通充电宝
							var id = res.data.data;
							uni.setStorageSync('deviceidm',id);
							uni.navigateBack({
						        //关闭当前页面，返回上一页面或多级页面。
							    delta:1
							});
						}else{//快充
							var id = res.data.data;
							
							uni.setStorageSync('deviceidk',id);
							
							uni.navigateBack({
								//关闭当前页面，返回上一页面或多级页面。
								delta:1
							});
							
						}
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			confirmfz(e){

				if(this.attrIndex==1){
					this.killingform.minute = e[0].value;
				}else{
					this.kkillingform.minute = e[0].value;
				}
				
				
			},
			
			confirmtime(e){
				if(this.attrIndex==1){
					this.timemethod = e[0].label;
					this.killingform.attr = e[0].value;
				}else{
					this.kkillingform.attr = e[0].value;
					this.timemethod1 = e[0].label;
				}
			},
			
			
			confirmdj(e){
				
				if(this.attrIndex==1){
					this.killingform.danjia = e[0].value;
				}else{
					this.kkillingform.danjia = e[0].value;
				}
				
			},
			confirmfd(e){
				if(this.attrIndex==1){
					this.killingform.dayconsume = e[0].value;
				}else{
					this.kkillingform.dayconsume = e[0].value;
				}
			},
			confirmmf(e){
				
				if(this.attrIndex==1){
					this.killingform.mianfei = e[0].value;
				}else{
					this.kkillingform.mianfei = e[0].value;
				}
				
			},
			
			fanhui() {
				uni.navigateBack();
			},
			topage(url) {
				uni.navigateTo({
					url
				})
			},
			submit(){
				uni.navigateBack();
			},
			
			billingInfo(id,type){
				this.request({
					url: '/xcxlogin/billinginfo',
					data: {id:id},
					method: "GET"
				}).then(res => {
					if(res.data.code == 200){
						console.log("打印一下充电宝数据");
						console.log(res.data.data);
						if(type==1){
							
							// killingform:{
							// 	mianfei: "",//免费时长
							// 	minute: '',//时间
							// 	danjia: '',//价格
							// 	dayconsume: '',//每日封顶
							// 	maxmoney: '99',//封顶金额
							// 	attr: 1,//1分钟 2小时
							// 	type: 1,
							// },
							this.billing = res.data.data;
							this.killingform.attr = res.data.data.attr;
							if(this.killingform.attr=='1'){
								this.timemethod = '分钟';
							}else{
								this.timemethod = '小时';
							}
							this.killingform.mianfei = res.data.data.mianfei;
							this.killingform.minute = res.data.data.minute;
							this.killingform.danjia = res.data.data.danjia;
							this.killingform.dayconsume = res.data.data.dayconsume;
							this.killingform.line_combo = res.data.data.line_combo;
						}else{
							this.kbilling = res.data.data;
							this.kkillingform.attr = res.data.data.attr;
							if(this.kkillingform.attr=='1'){
								this.timemethod1 = '分钟';
							}else{
								this.timemethod1 = '小时';
							}
							this.kkillingform.mianfei = res.data.data.mianfei;
							this.kkillingform.minute = res.data.data.minute;
							this.kkillingform.danjia = res.data.data.danjia;
							this.kkillingform.dayconsume = res.data.data.dayconsume;
						}
						
					}
				});
			},
			
			configBilling1(){
				//请求普通宝的计费方式
				this.request({
					url: '/webconfig/deviceconfiginfo',
					data: {},
					method: "GET"
				}).then(res => {
					// console.log(res);
					if (res.data.code == 200) {
						console.log("打印一下普通宝");
						console.log(res);
						this.billing = res.data.data;
						console.log(this.billing);
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
				
			},
			configBilling2(){
				//请求一下快充宝的计费方式
				this.request({
					url: '/webconfig/deviceconfiginfo1',
					data: {},
					method: "GET"
				}).then(res => {
					// console.log(res);
					if (res.data.code == 200) {
						console.log("打印一下快充宝");
						console.log(res);
						this.kbilling = res.data.data;
						console.log(this.kbilling);
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pricing {
		width: 100%;
		margin: 0 auto;
		height: 100vh;
		background: #f9f9ff;
		overflow-y: scroll;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);

			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: left;
				color: #333333;
				font-size: 32rpx;
				padding-left: 74rpx;
				font-weight: 700;

				text {
					font-size: 24rpx;
				}

				.iconfont {
					position: absolute;
					top: 0;
					left: 30rpx;
					font-size: 44rpx;
				}
			}
		}

		.headtop {
			width: 100%;
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);
			height: 300rpx;
			padding: 20rpx 40rpx 0;
			box-sizing: border-box;

			.left {
				.mess {
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;

					view {
						font-size: 24rpx;
						color: #333333;
					}

					.dian {
						width: 8rpx;
						height: 8rpx;
						background: #5C88FA;
						display: block;
						border-radius: 50%;
						margin: 0 auto;
					}

					.active {
						font-size: 32rpx;
						color: #333333;
						font-weight: 700;
						margin-left: 0;
					}
				}

				.mess1 {
					margin-left: 20rpx;
				}
			}
		}
		
		.nr{
			width: 90%;
			margin: 0 auto;
			z-index: 70;
			margin-top: -200rpx;
			
			.headtitle{
				font-size: 28rpx;
				font-weight: 700;
				margin-bottom: 20rpx;
				color: #333333;
				text-align: center;
			}
			
			.list{
				width: 100%;
				background: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				padding: 40rpx 40rpx 10rpx;
				position: relative;
				box-shadow: rgba(223, 230, 255, 0.67) 0px 0px 6px;
				
				.liebiao{
					margin-bottom: 30rpx;
					
					.left{
						font-size: 24rpx;
						color: #333333;
						width: 36%;
					}
					
					.right{
						
						.title{
							font-size: 24rpx;
							color: #333333;
						}
						
						.name{
							font-size: 24rpx;
							color: #5C88FA;
						}
					}
				}
			}
		}
		
		.headtitles{
			font-size: 28rpx;
			font-weight: 700;
			margin-bottom: 20rpx;
			margin-top: 70rpx;
			color: #333333;
			text-align: center;
		}
		
		.form{
			width: 90%;
			margin: 0 auto;
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 20rpx;
			box-shadow:rgba(223, 230, 255, 0.67) 0px 0px 6px;
			
			.content{
				height: 92rpx;
				line-height: 92rpx;
				border-bottom: 1rpx solid #D8D8D8;
				
				.name{
					font-size: 28rpx;
					color: #333333;
					width: 40%;
				}
				
				.inp{
					width: 60%;
					text-align: right;
					
					input{
						font-size: 28rpx;
						color: #999999;
						height: 92rpx;
						line-height: 92rpx;
					}
				}
				
				.xuanze{
					width: 60%;
					text-align: right;
					height: 92rpx;
					line-height: 92rpx;
					color: #368BF8;
				}
				
				.img{
					width: 60%;
					text-align: right;
					height: 92rpx;
					line-height: 92rpx;
					
					image{
						width: 108rpx;
						height: 64rpx;
						margin-top: 12rpx;
					}
				}
			}
			
			.contentlast{
				border: none;
			}
		}
		
		.footer{
			width: 100%;
			margin: 0 auto 40rpx;
			margin-top: 60rpx;
			height: 72rpx;
			text-align: center;
			
			.submit{
				width: 240rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: linear-gradient(90deg, #65bdfc, #398ef8);
				margin-left: 248rpx;
				border-radius: 36rpx;
				border-top-left-radius: 0;
				border-bottom-left-radius: 42rpx;
				color: #FFFFFF;
				font-size: 32rpx;
			}
		}
	}
</style>